Assignment

Read, sign (add your name to) the student agreement and commit it to your repo Work through a git tutorial.
Build a personal website in the class archive describing yourself and your final project.

The Website 💻

Hmm, Websites! We're asked to explore the mighty realm of website development this week. I never thought of myself to be quite the developer so I gave myself some time to learn HTML basics and after a little digging I chose to use a bootstrap template. Bootstrap is a front-end framework used for developing responsive websites. It has a nice set of components that make web development easier. So think of it like this HTML is the cake and bootstrap is the sprinkles or cherry on top making the website visually appealing. I chose this template cause I suited my style. now for the Weekly Assignments layout. How should it? How should I even start. I returned to youtube for guidance about website wireframing and found this nice video. I was inspired by saeed's. website

Then to help me visualize my website especially my weekly assignment template I used this online tool called Wireframe.cc . I played with it for a while until I was satisfied with my output.

Practicing

Before Jumping straigt to carasouls and navbars, I had to grasp the basic ideas behind all the flashy components. So, I went straight to HTML..

I used it once to make my first ever website 6 years ago but I found it boring to learn back then. But now, I found it exciting to relearn and explore more. Also, I formed the habit of claping to myself whenever I solved something. I turn to w3schools for the fundamentals.

Now bootstrap

I relied heavily on the documentation in these website getbootstrap , tutorialrepublic, w3schools. fortunately the grayscale template provided a nice start but still I wanted something extra like a dropdown with the assignment list, Side bar for each week, to understand navbars, etc etc. So I ended up with something like this

Dropdowns

After coping the template I bagan working on the assignmnet list. I wanted them to be in a dropdown in the navbar. That's my code

Scrollpy

I wanted to the add a scrollpy to the assignment.And that was my code

VOILA!

Git

Git is a free and open source distributed version control system designed to handle projects. To understand git in the first place I used these tutorials Git & Github for Poets " The tutorials served as a just an point for me to start exploring but in these tutorials he used only the command line to deal with git & github. To me the command line is unexplored territorry and We were introduced to a software called sourcetree . except it didn't work with me and I face a lot of issues to clone my repository. So, time to face my greatest fears: TERMINALS.

First download WSL on my windows 11 by following this link .

Then I Restarted my laptop and opened Ubuntu

Restarted my laptop, set my password, and opened Ubuntu
I followed this tutorial to generate key by using the command" ssh- keygen -o"
Copied the key's fingerprint to my Gitlab Account
Cloning the repo using SSH key from
Configure my username & email
Then I pushed using the magic words: git add . git commit -m git push

Vol.1: Project Management

Developing a Website